<template>
  <div>
    <div>
      <span class="padding-l-sm text-blue pointer" @click="toEdit">
        {{ data.waybillNo }}
      </span>
      <el-tooltip effect="dark" content="点击复制" placement="bottom">
        <i
          class="el-icon-copy-document tag-read"
          :data-clipboard-text="data.waybillNo"
          @click="copy"
        ></i>
      </el-tooltip>
    </div>
    <div>
      <span class="padding-l-sm">
        {{ data.referenceNo }}
      </span>
    </div>
    <div>
      <span class="padding-l-sm" style="color:red;font-size: 20px;">
        <img v-if="logos" :src="logos" />
        <el-tooltip
          v-if="data.dismantleStatus === 1"
          effect="light"
          content="运单拆单"
          placement="top"
        >
            <img :src="chaiPng" />
          </el-tooltip>
        <span
          v-if="data.verifyEori != null && data.eori != '' && data.eori != null"
        >
          <el-tooltip
            v-if="data.verifyEori === 1"
            effect="light"
            content="EORI税号验证通过"
            placement="top"
          >
            <img :src="isVerifyEori1" @click="gotoRoriNetAddress"/>
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyEori === 0"
            effect="light"
            content="EORI税号待验证"
            placement="top"
          >
            <img :src="isVerifyEori0" />
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyEori === -1"
            effect="light"
            content="EORI税号验证失败"
            placement="top"
          >
            <img :src="isVerifyEori11" />
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyEori === 9"
            effect="light"
            content="EORI税号验证通过,地址验证失败"
            placement="top"
          >
            <img :src="isVerifyEori11" />
          </el-tooltip>
        </span>
        <span
          v-if="data.verifyVat != null && data.vat != '' && data.vat != null"
        >
          <el-tooltip
            v-if="data.verifyVat === 1"
            effect="light"
            content="VAT税号验证通过"
            placement="top"
          >
            <img :src="isVerifyVat1" @click="gotoVatNetAddress" />
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyVat === 0"
            effect="light"
            content="VAT税号待验证"
            placement="top"
          >
            <img :src="isVerifyVat0" />
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyVat === -1"
            effect="light"
            content="VAT税号验证失败"
            placement="top"
          >
            <img :src="isVerifyVat11" />
          </el-tooltip>
          <el-tooltip
            v-if="data.verifyVat === 9"
            effect="light"
            content="VAT税号验证通过,地址验证失败"
            placement="top"
          >
            <img :src="isVerifyVat11" />
          </el-tooltip>
        </span>
      </span>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import amazonOrder from "@/assets/images/amazon-order.jpg";
import apiOrder from "@/assets/images/api-order.jpg";
import caiOrder from "@/assets/images/cai-order.jpg";
import fba2Order from "@/assets/images/fab2-order.jpg";
import fbaOrder from "@/assets/images/fba-order.png";
import normOrder from "@/assets/images/norm-order.jpg";
import verifyEori0 from "@/assets/images/verify_eori_0.png";
import verifyEori1 from "@/assets/images/verify_eori_1.png";
import verifyEori11 from "@/assets/images/verify_eori_11.png";
import verifyVat0 from "@/assets/images/verify_vat_0.png";
import verifyVat1 from "@/assets/images/verify_vat_1.png";
import verifyVat11 from "@/assets/images/verify_vat_11.png";
import chai from "@/assets/images/chai.png";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      logos: "",
      amazonOrder: amazonOrder,
      apiOrder: apiOrder,
      caiOrder: caiOrder,
      fba2Order: fba2Order,
      fbaOrder: fbaOrder,
      normOrder: normOrder,
      //校验EORI
      isVerifyEori0: verifyEori0,
      //校验EORI
      isVerifyEori1: verifyEori1,
      //校验EORI
      isVerifyEori11: verifyEori11,
      //校验VAT
      isVerifyVat0: verifyVat0,
      //校验VAT
      isVerifyVat1: verifyVat1,
      //校验VAT
      isVerifyVat11: verifyVat11,
      chaiPng:chai,
      orderTypeMap: {
        0: "标准下单",
        1: "快捷下单",
        2: "FBA补货",
        3: "Amazon推送",
        4: "API推送",
        5: "菜鸟推送"
      }
    };
  },
  mounted() {
    this.initLogos();
  },
  methods: {

    gotoVatNetAddress(){
      var netAddress ="";
      //英国
      if (this.data.countryId === 330) {
        netAddress = "https://www.tax.service.gov.uk/check-vat-number/enter-vat-details";
      }else{
        //欧盟
        netAddress = "https://ec.europa.eu/taxation_customs/vies/vatResponse.html";
      }
      var a = document.createElement("a");
      a.setAttribute("href", netAddress);
      a.setAttribute("target", "_blank");
      a.click();
    },

    gotoRoriNetAddress(){
      var netAddress ="";
      //英国
      if (this.data.countryId === 330) {
        netAddress = "https://www.tax.service.gov.uk/check-eori-number/result";
      }else{
        //欧盟
        netAddress = "https://ec.europa.eu/taxation_customs/dds2/eos/eori_validation.jsp?Lang=en&EoriNumb";
      }
      var a = document.createElement("a");
      a.setAttribute("href", netAddress);
      a.setAttribute("target", "_blank");
      a.click();
    },

    initLogos() {
      if (this.data.ordersByFba == 0) {
        this.logos = this.normOrder;
      } else if (this.data.ordersByFba == 1) {
        this.logos = this.fbaOrder;
      } else if (this.data.ordersByFba == 2) {
        this.logos = this.fba2Order;
      } else if (this.data.ordersByFba == 3) {
        this.logos = this.amazonOrder;
      } else if (this.data.ordersByFba == 4) {
        this.logos = this.apiOrder;
      } else if (this.data.ordersByFba == 5) {
        this.logos = this.caiOrder;
      }
    },
    toEdit() {
      var url = "#/blank/waybill__alledit__main";
      url = url + "?waybillId=" + this.data["id"];
      window.open(url, "_blank");
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.padding-l-sm {
  padding-left: 2px;
}
</style>
